<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>子组件的数据传递到父组件</title>
	<!-- <script src="https://unpkg.com/vue@next"></script> -->
	<script src="js/vue.global.js"></script>
	<link rel="stylesheet" href="css/com.css">
</head>
<body>
<div id="app">
	<local-component @pushdata="getdata"></local-component>&nbsp;
	<global-component @pushdata2="savedata"></global-component>
	<hr>
	<ul>
		<li v-for="item in userInfo">{{item}}</li>
	</ul>
	<!-- <global-component :link="nav"></global-component> -->
</div>

</body>
<script>
const app = Vue.createApp({
	data() {
		return {
			userInfo: ['原始的一个数据']
		}
	},
	components:{
		'local-component':{
			data:function(){
				return {
					name:'admin',
					email:'admin@html.cn',
				};
			},
			
			//创建一个模块，模板哟昂定义时间
			template: `<button @click="send">向父组件传递数据（局部组件）</button>`,
			//组件方法
			methods:{
				send:function(){
					this.$emit('pushdata', [this.name, this.email]);
				}
			}
		},
	},
	//实例事件
	methods:{
		getdata:function(userInfo){
			// alert(userInfo);
			userInfo.forEach(function(value){
				this.userInfo.push(value);
			}, this)
		},
		savedata:function(data){
			this.userInfo.push(data);
		}
	}
});

app.component('global-component', {
	data:function(){
		return {
			str:'全局组件的数据。。。',
		};
	},
	
	template: `<button @click="fn">向父组件传递数据（全局组件）</button>`,
	//组件方法
	methods:{
		fn:function(){
			this.$emit('pushdata2', this.str);
		}
	}
});

let vm1 = app.mount('#app');
// console.log(vm1);
</script>
</html>